<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="./utils/createDraw.js"></script>
</head>

<body>
    <select id="select" onchange="handleChange(event)">
        <option value="None" selected="selected">无</option>
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Polygon">多边形</option>
        <option value="Circle">圆</option>
        <option value="Square">正方形</option>
        <option value="Box">长方形</option>
    </select>
    <div id="map">
    </div>
    <script>
        var map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* 创建画布--空的图层 */
        const source = new ol.source.Vector({});
        const layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        /* 获取下拉框的值 */
        let draw;
        function handleChange(evt) {
            var type = evt.target.value;
            console.log(type)
            /* 进入函数的时候,先判断以下是否有画笔
            如果有就清除
             */
            if (draw) {
                map.removeInteraction(draw);
            }
            if (type == "None") {
                source.clear();
                return;
            }
            draw = createDraw({
                type,
                source
            })
            map.addInteraction(draw)
            // if (type === "None") {
            //     source.clear()
            // } else {
            //     draw = createDraw({
            //         type,
            //         source
            //     })
            //     map.addInteraction(draw)
            // }

        }
    </script>
</body>

</html>